.MessWrap {
  width: 100%;
  height: 100%;
}

.MessWrap .MessTop {
  width: 100%;
  height: 150px;
  background: white;
  border-top: 1px solid #ccc;
}

.MessWrap .MessTop ul {
  text-align: center;
  margin-top: 50px;
}

.MessWrap .MessTop ul li h4 span {
  font-weight: bold;
}

.MessWrap .MessMain {
  width: 80%;
  height: 100%;
  margin-left: 10%;
}

.MessWrap .MessMain .comment {
  width: 100%;
  height: 900px;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.MessWrap .MessMain .comment p {
  text-align: center;
  margin-top: 20px;
}

.MessWrap .MessMain .comment .CommentBox {
  width: 100%;
  height: 260px;
  background: white;
  display: flex;
  flex-direction: column;
  color: #7e7c7c;
}

.MessWrap .MessMain .comment .CommentBox .CommentBoxs {
  width: 95%;
  height: 230px;
  margin: 0 auto;
  margin-top: 15px;
}

.MessWrap .MessMain .comment .CommentBox .CommentBoxs textarea {
  width: 100%;
  height: 180px;
  border: 1px solid #ccc;
  outline: none;
}

.MessWrap .MessMain .comment .CommentBox .CommentBoxs .commentBoxs {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}

.MessWrap .MessMain .comment .CommentBox .CommentBoxs .commentBoxs button {
  width: 60px;
  height: 30px;
  border: 1px solid #ccc;
  font-size: 18px;
}

.MessWrap .MessMain .comment .comment-list {
  width: 100%;
  height: 450px;
  overflow: hidden;
}

.MessWrap .MessMain .comment .comment-list li {
  width: 100%;
  height: 120px;
  background: white;
  margin-top: 10px;
}

.MessWrap .MessMain .comment p {
  text-align: center;
  margin-top: 20px;
}

.MessWrap .MessMain .comment .paging {
  text-align: center;
  margin-top: 30px;
}

.MessWrap .MessMain .recommended {
  margin-top: 20px;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.MessWrap .MessMain .recommended p {
  text-align: center;
  line-height: 30px;
  margin-top: 10px;
}

.MessWrap .MessMain .recommended .readWrap {
  width: 100%;
  height: 100%;
}

.MessWrap .MessMain .recommended .readWrap ul {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
  background: white;
}

.MessWrap .MessMain .recommended .readWrap ul li {
  width: 96%;
  height: 140px;
  border-bottom: 1px solid #ccc;
  margin-left: 2%;
}

.MessWrap .MessMain .recommended .readWrap ul li dl dd:nth-child(1) span:nth-child(1) {
  color: #7e7c7c;
  font-size: 19px;
  font-weight: bold;
}

.MessWrap .MessMain .recommended .readWrap ul li dl dd:nth-child(1) span:nth-child(1):hover {
  color: red;
}

.MessWrap .MessMain .recommended .readWrap ul li dl dd:nth-child(1) span:nth-child(2) {
  font-size: 16px;
  color: #afaeae;
  margin-left: 15px;
}

.MessWrap .MessMain .recommended .readWrap ul li dl dd:nth-child(2) {
  color: #7e7c7c;
  font-size: 17px;
}

.MessWrap .MessMain .recommended .readWrap ul li dl dd:nth-child(3) {
  color: #afaeae;
  margin-top: 55px;
}

.MessWrap .MessMain .recommended .readWrap ul li dl dd:nth-child(3) span:nth-child(1) {
  margin-left: 0px;
}

.MessWrap .MessMain .recommended .readWrap ul li dl dd:nth-child(3) span {
  margin-left: 15px;
}

.MessWrap .MessMain .recommended .readWrap ul li dl dt {
  float: right;
  margin-top: -100px;
}

.MessWrap .MessMain .recommended .readWrap ul li dl dt img {
  width: 130px;
  height: 90px;
}
